<template>
  <div>
    <el-container>
      <el-header>
        <div class="header-container">
          <div class="l-content">
            <el-image
              style="height: 50px; margin: 0 20px"
              :src="src"
            ></el-image>
            <el-menu
              router
              :default-active="activeIndex"
              class="el-menu-demo"
              mode="horizontal"
            >
              <el-menu-item index="/">找家政</el-menu-item>
              <el-menu-item index="/Home">个人中心</el-menu-item>
            </el-menu>
          </div>
          <div class="r-content">
            <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link">
                <el-avatar
                  src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                ></el-avatar>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="myInfo">个人中心</el-dropdown-item>
                <el-dropdown-item command="loginOut">退出</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </el-header>
      <el-container
        style="
          padding: 20px 10px 0 10px;
          background-color: #f0f4fd;
          height: 650px;
        "
      >
        <el-main
          style="
            background-color: #ffffff;
            margin-left: 20px;
            border-radius: 10px;
            height: 580px;
          "
        >
          <div>
            <el-card class="filter-container" shadow="never">
              <div>
                <i class="el-icon-search"></i>
                <span>筛选搜索</span>
                <el-button
                  style="float: right"
                  @click="handleSearchList()"
                  type="primary"
                  size="small"
                >
                  查询结果
                </el-button>
                <el-button
                  style="float: right; margin-right: 15px"
                  @click="handleResetSearch()"
                  size="small"
                >
                  重置
                </el-button>
              </div>
              <div style="margin-top: 15px">
                <el-form
                  :inline="true"
                  ref="searchList"
                  :model="searchList"
                  size="small"
                  label-width="140px"
                >
                  <!-- <el-cascader
                    v-model="selectedOptions"
                    :options="options"
                    :props="props"
                    lazy
                  >
                  </el-cascader> -->
                  <el-form-item label="省份:">
                    <el-select
                      v-model="searchList.provinceId"
                      style="width: 203px"
                      placeholder="请选择要搜索的省份"
                      @change="showCity"
                      clearable
                    >
                      <el-option
                        v-for="(item, index) in provinceOptions"
                        :key="index"
                        :label="item.name"
                        :value="item.id"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>

                  <el-form-item label="城市:">
                    <el-select
                      v-model="searchList.cityId"
                      style="width: 203px"
                      placeholder="请选择要搜索的城市"
                      @change="showArea"
                      clearable
                    >
                      <el-option
                        v-for="(item, index) in cityOptions"
                        :key="index"
                        :label="item.name"
                        :value="item.id"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>

                  <el-form-item label="地区:">
                    <el-select
                      v-model="searchList.areaId"
                      style="width: 203px"
                      placeholder="请选择要搜索的地区"
                      clearable
                    >
                      <el-option
                        v-for="(item, index) in areaOptions"
                        :key="index"
                        :label="item.name"
                        :value="item.id"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>

                  <el-form-item label="公司名:">
                    <el-input
                      style="width: 203px"
                      v-model="searchList.name"
                      placeholder="请输入要搜索的公司名"
                      clearable
                    ></el-input>
                  </el-form-item>

                  <el-form-item label="服务标签:">
                    <el-select
                      v-model="searchList.labelId"
                      style="width: 203px"
                      placeholder="请选择要搜索的服务标签"
                      clearable
                    >
                      <el-option
                        v-for="(item, index) in labelOptions"
                        :key="index"
                        :label="item.name"
                        :value="item.id"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
              </div>
            </el-card>
            <el-table
              :data="tableData"
              border
              v-loading="listLoading"
              style="width: 100%; margin-top: 20px"
            >
              <el-table-column
                prop="name"
                label="公司名"
                width="150"
                align="center"
              >
              </el-table-column>
              <el-table-column label="标签" width="300" align="center">
                <template slot-scope="scope">
                  <el-tag :key="tag.id" v-for="tag in scope.row.labels">
                    {{ tag.name }}</el-tag
                  >
                </template></el-table-column
              >
              <el-table-column align="center" label="所在地" width="180">
                <template slot-scope="scope">
                  {{
                    scope.row.address
                  }}
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                prop="businessLicense"
                label="统一信用代码"
                width="180"
              >
              </el-table-column>
              <el-table-column
                prop="contact"
                label="联系人"
                width="180"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="phone"
                label="联系电话"
                width="180"
                align="center"
              >
              </el-table-column>
              <el-table-column
                fixed="right"
                label="操作"
                width="250"
                align="center"
              >
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="primary"
                    @click="chat(scope.row.id, scope.row.name)"
                    >咨询
                  </el-button>
                  <el-button
                    size="mini"
                    type="success"
                    @click="
                      score(scope.row.id);
                      showscore = true;
                    "
                    >查看评价
                  </el-button>
                  <el-button
                    size="mini"
                    type="success"
                    @click="
                      sendMessage.companyId = scope.row.id;
                      showOrder = true;
                      showserve(scope.row.id);
                    "
                    >下单
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-dialog title="地址簿" :visible.sync="showAddress" width="67%">
              <span
                ><el-card class="filter-container" shadow="never">
                  <el-table
                    v-loading="addressLoading"
                    :data="addressData"
                    border
                  >
                    <el-table-column
                      prop="name"
                      label="用户名"
                      width="120"
                      align="center"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="phone"
                      label="电话"
                      width="120"
                      align="center"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="email"
                      label="邮箱"
                      width="180"
                      align="center"
                    ></el-table-column>
                    <el-table-column
                      prop="cite"
                      label="地址"
                      width="350"
                      align="center"
                    >
                    </el-table-column>
                    <el-table-column label="操作" width="175" align="center">
                      <template slot-scope="scope">
                        <el-button
                          size="mini"
                          type="success"
                          @click="addAddress(scope.row)"
                          >选择
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                  <el-pagination
                    @current-change="getAddress"
                    layout="prev, pager, next"
                    :page-count="addressPageCunt"
                  >
                  </el-pagination> </el-card
              ></span>
              <span slot="footer" class="dialog-footer">
                <el-button @click="showAddress = false">返 回</el-button>
              </span>
            </el-dialog>
            <el-dialog title="下单" :visible.sync="showOrder" width="40%">
              <span
                ><el-card class="filter-container" shadow="never">
                  <el-form
                    :inline="true"
                    :model="sendMessage"
                    size="small"
                    ref="sendMessage"
                    :rules="rules"
                    label-width="140px"
                  >
                    <el-form-item label="服务标签:" prop="serverId">
                      <el-select
                        ref="label"
                        v-model="sendMessage.serverId"
                        @change="showPrice"
                        style="width: 203px"
                        placeholder="请选择服务标签"
                        clearable
                      >
                        <el-option
                          v-for="(item, index) in ServerOptions"
                          :key="index"
                          :label="item.name"
                          :value="item.id"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>

                    <el-form-item label="省份:">
                      <el-select
                        ref="province"
                        v-model="sendMessage.provinceId"
                        style="width: 203px"
                        placeholder="请选择地址所在省份"
                        @change="showCity"
                        clearable
                      >
                        <el-option
                          v-for="(item, index) in provinceOptions"
                          :key="index"
                          :label="item.name"
                          :value="item.id"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <el-button
                      plain
                      size="small"
                      @click="
                        showAddress = true;
                        getAddress(1);
                      "
                      >从地址簿中选择</el-button
                    >
                    <el-form-item label="城市:">
                      <el-select
                        ref="city"
                        v-model="sendMessage.cityId"
                        style="width: 203px"
                        placeholder="请选择地址所在城市"
                        @change="showArea"
                        clearable
                      >
                        <el-option
                          v-for="(item, index) in cityOptions"
                          :key="index"
                          :label="item.name"
                          :value="item.id"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>

                    <el-form-item label="地区:">
                      <el-select
                        ref="area"
                        v-model="sendMessage.areaId"
                        style="width: 203px"
                        placeholder="请选择地址所在地区"
                        clearable
                      >
                        <el-option
                          v-for="(item, index) in areaOptions"
                          :key="index"
                          :label="item.name"
                          :value="item.id"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>

                    <el-form-item prop="address" label="详细地址:">
                      <el-input
                        style="width: 300px"
                        v-model="sendMessage.address"
                        placeholder="请填写您的详细地址"
                        clearable
                      ></el-input>
                    </el-form-item>

                    <el-form-item prop="customerName" label="联系人姓名:">
                      <el-input
                        style="width: 300px"
                        v-model="sendMessage.customerName"
                        placeholder="请填写您的姓名"
                        clearable
                      ></el-input>
                    </el-form-item>
                    <el-form-item prop="phone" label="联系电话:">
                      <el-input
                        style="width: 300px"
                        v-model="sendMessage.phone"
                        placeholder="请填写您的联系电话"
                        clearable
                      ></el-input>
                    </el-form-item>
                    <el-form-item prop="email" label="邮箱地址:">
                      <el-input
                        style="width: 300px"
                        v-model="sendMessage.email"
                        placeholder="请填写您的邮箱地址"
                        clearable
                      ></el-input>
                    </el-form-item>

                    <el-form-item prop="qty" label="数量:">
                      <el-input
                        style="width: 300px"
                        v-model="sendMessage.qty"
                        placeholder="请填写人数需求"
                        clearable
                      ></el-input>
                    </el-form-item>

                    <el-form-item prop="price" label="服务单价:">
                      <el-input
                        style="width: 300px"
                        v-model="sendMessage.price"
                        disabled
                        clearable
                      ></el-input>
                    </el-form-item>
                    <el-form-item prop="startTime" label="约定时间:">
                      <el-date-picker
                        style="width: 300px"
                        v-model="sendMessage.startTime"
                        type="datetime"
                        placeholder="请指定约定时间"
                        value-format="yyyy-MM-dd HH:mm:ss"
                      >
                      </el-date-picker>
                    </el-form-item>
                  </el-form> </el-card
              ></span>
              <span slot="footer" class="dialog-footer">
                <el-button @click="showOrder = false">取 消</el-button>
                <el-button type="primary" @click="sendOrder()">确 定</el-button>
              </span>
            </el-dialog>
            <el-dialog title="评论区" class="abow_dialog" :visible.sync="showscore" width="50%">
              <span
                ><el-card class="filter-container" shadow="never">
                  <div v-for="item in scoreData" :key="item.id">
                    <el-row>
                      <el-col :span="2"
                        ><div class="grid-content bg-purple">
                          <el-avatar
                            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                          ></el-avatar></div
                      ></el-col>
                      <el-col :span="12"
                        ><div class="grid-content bg-purple-light">
                          <h3>匿名用户</h3>
                          <el-row>
                            <el-col :span="12"
                              ><div class="grid-content bg-purple">
                                <p style="margin-top: 5px">
                                  {{ item.createTime }}
                                </p>
                              </div></el-col
                            >
                            <el-col :span="12"
                              ><div class="grid-content bg-purple-light">
                                <el-rate
                                  style="margin-top: 5px"
                                  v-model="item.score"
                                  disabled
                                  show-text
                                ></el-rate></div
                            ></el-col>
                          </el-row></div
                      ></el-col>
                    </el-row>
                    <div style="margin-left: 57px">
                      <el-card
                        style="background-color: #f0f4fd"
                        class="filter-container"
                        shadow="never"
                      >
                        {{ item.comments }}
                      </el-card>
                    </div>
                    <el-divider></el-divider>
                  </div>
                  <div v-if="scoreData.length == 0">
                    <el-empty description="暂无评论"></el-empty>
                  </div> </el-card
              ></span>
              <span slot="footer" class="dialog-footer">
                <el-button @click="showscore = false">返 回</el-button>
              </span>
            </el-dialog>
            <div class="block">
              <el-pagination
                @current-change="handleCurrentChange"
                layout="prev, pager, next"
                :page-count="pageCunt"
              >
              </el-pagination>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import logo from "../../assets/fzu.jpg";
import info from "../../assets/info.png";
import Cookie from "js-cookie";
export default {
  data() {
    return {
      // selectedOptions: [],
      // options: [],
      // props: {
      //   lazy: true,
      //   lazyLoad: (node, resolve) => {
      //     if (node.level == 0) {
      //       // 加载省份数据
      //       this.getProvince(resolve);
      //     } else if (node.level == 1) {
      //       // 加载城市数据
      //       this.loadCities(node, resolve);
      //     } else {
      //       // 加载区县数据
      //       this.loadDistricts(node, resolve);
      //     }
      //   },
      //   value: "id",
      //   label: "name",
      //   children: "children",
      // },
      listLoading: true,
      scoreLoading: true,
      addressLoading: true,
      showscore: false,
      showOrder: false,
      showAddress: false,
      url: info,
      src: logo,
      addressData: [],
      sendMessage: {
        address: "",
        companyId: "",
        customerName: "",
        description: "",
        email: "",
        phone: "",
        price: "",
        qty: "",
        serverId: "",
        startTime: "",
      },
      pageCunt: 1,
      addressPageCunt: 1,
      activeIndex: "/",
      searchList: {
        areaId: "",
        cityId: "",
        labelId: "",
        name: "",
        provinceId: "",
        pageSize: 5,
      },
      tableData: [],
      scoreData: [],
      currentList: {
        pageNum: 1,
        pageSize: 5,
        provinceId:35,
        cityId:13
      },
      currentscoreList: {
        pageNum: 1,
        pageSize: 5,
        companyId: 0,
      },
      provinceOptions: [],
      cityOptions: [],
      areaOptions: [],
      labelOptions: [],
      ServerOptions: [],
      rules: {
        serverId: [{ required: true, message: "请选择标签", trigger: "blur" }],
        address: [
          { required: true, message: "请填写详细地址", trigger: "blur" },
        ],
        customerName: [
          { required: true, message: "请填写联系人姓名", trigger: "blur" },
        ],
        phone: [{ required: true, message: "请填写联系电话", trigger: "blur" }],
        demand: [
          { required: true, message: "请填写具体需求", trigger: "blur" },
        ],
        qty: [{ required: true, message: "请填写人数", trigger: "blur" }],
        price: [{ required: true, message: "请填写一口价", trigger: "blur" }],
        email: [{ required: true, message: "请填写邮箱", trigger: "blur" }],
        startTime: [
          { required: true, message: "请填写约定时间", trigger: "blur" },
        ],
        email: [{ required: true, message: "请填写您的邮箱", trigger: "blur" }],
      },
    };
  },
  created() {
    this.handleCurrentChange(1);
    this.getProvince();
    this.getLable();
  },
  methods: {
    getAddress(pageNum) {
      this.addressLoading = true;
      this.axios
        .get("api/user/auth/address/list?pageNum=" + pageNum + "&pageSize=5")
        .then((response) => {
          this.addressData = response.data.value.data;
          if (pageNum == 1) {
            if (response.data.value.total > 5) var total = 5;
            else var total = response.data.value.total;
          } else {
            var temp = response.data.value.total - (pageNum - 1) * 5;
            if (temp > 5) var total = 5;
            else var total = temp;
          }

          for (var i = 0; i < total; i++) {
            this.addressData[i].cite =
              response.data.value.data[i].area.city.province.name +
              response.data.value.data[i].area.city.name +
              response.data.value.data[i].area.name +
              this.addressData[i].address;
          }
          if (
            response.data.value.total / 5 >
            Number.parseInt(response.data.value.total / 5)
          ) {
            this.addressPageCunt =
              Number.parseInt(response.data.value.total / 5) + 1;
          } else {
            this.addressPageCunt = Number.parseInt(
              response.data.value.total / 5
            );
          }
          this.addressLoading = false;
        })
        .catch((error) => {});
    },
    // loadCities(node, resolve) {
    //   // 调用后端接口获取城市数据
    //   this.axios
    //     .get("api/user/sys/listCity?provinceId=" + node.data.id)
    //     .then((response) => {
    //       const cities = response.data.value.map((item) => {
    //         return {
    //           id: item.id,
    //           name: item.name,
    //           children: [],
    //           leaf: false,
    //         };
    //       });
    //       node.children = cities;
    //       resolve(cities);
    //     })
    //     .catch((error) => {});
    // },
    // loadDistricts(node, resolve) {
    //   // 调用后端接口获取区县数据
    //   this.axios
    //     .get("api/user/sys/listArea?cityId=" + node.data.id)
    //     .then((response) => {
    //       const districts = response.data.value.map((item) => {
    //         return {
    //           id: item.id,
    //           name: item.name,
    //           leaf: true,
    //         };
    //       });
    //       node.children = districts;
    //       resolve(districts);
    //     })
    //     .catch((error) => {});
    // },
    getLable() {
      this.axios
        .get("api/user/label/list")
        .then((response) => {
          this.labelOptions = response.data.value;
          for (var i = 0; i < response.data.value.length; i++) {
            if (this.labelOptions[i].status != "NORMAL") {
              this.labelOptions.splice(i, 1);
            }
          }
        })
        .catch((error) => {});
    },
    // getProvince(resolve) {
    //   this.axios
    //     .get("api/user/sys/listProvince")
    //     .then((response) => {
    //       const provinces = response.data.value.map((item) => {
    //         return {
    //           id: item.id,
    //           name: item.name,
    //           children: [],
    //           leaf: false,
    //         };
    //       });
    //       resolve(provinces);
    //     })
    //     .catch((error) => {});
    // },
    getProvince() {
      this.axios
        .get("api/user/sys/listProvince")
        .then((response) => {
          this.provinceOptions = response.data.value;
        })
        .catch((error) => {});
    },
    showCity(item) {
      this.searchList.areaId = "";
      this.searchList.cityId = "";
      this.cityOptions = [];
      this.areaOptions = [];
      if (item != 0) {
        this.axios
          .get("api/user/sys/listCity?provinceId=" + item)
          .then((response) => {
            this.cityOptions = response.data.value;
          })
          .catch((error) => {});
      }
    },
    showArea(item) {
      this.searchList.areaId = "";
      this.areaOptions = [];
      if (item != 0) {
        this.axios
          .get("api/user/sys/listArea?cityId=" + item)
          .then((response) => {
            this.areaOptions = response.data.value;
          })
          .catch((error) => {});
      }
    },
    loginOut() {
      Cookie.remove("token");
      Cookie.remove("menu");
      Cookie.remove("information");
    },
    handleCommand(command) {
      if (command == "loginOut") {
        Cookie.remove("token");
        Cookie.remove("menu");
        this.axios
          .get("api/user/logout")
          .then((response) => {
            this.$message.success("退出登录");
          })
          .catch((error) => {});
        this.$router.replace("/");
      } else {
        this.$router.push("/Home");
      }
    },
    handleCurrentChange(val) {
      this.listLoading = true;
      this.currentList.pageNum = val;
      this.axios
        .get("api/user/company/list", {
          params: this.currentList,
        })
        .then((response) => {
          this.tableData = response.data.value.data;
          if (
            response.data.value.total / 5 >
            Number.parseInt(response.data.value.total / 5)
          ) {
            this.pageCunt = Number.parseInt(response.data.value.total / 5) + 1;
          } else {
            this.pageCunt = Number.parseInt(response.data.value.total / 5);
          }
          for (var i = 0; i < this.tableData.length; i++) {
            for (var j = 0; j < this.tableData[i].labels.length; j++) {
              if (this.tableData[i].labels[j].status != "NORMAL") {
                this.tableData[i].labels.splice(j, 1);
              }
            }
          }
          this.listLoading = false;
        })
        .catch((error) => {
          this.$message.error("无法获取数据");
          this.listLoading = false;
        });
    },
    chat(id, name) {
      var chatCompany = {
        fromId: id,
        fromName: name,
      };
      Cookie.set("chatCompany", JSON.stringify(chatCompany));
      this.$router.push("/Chat");
    },
    score(id) {
      this.currentscoreList.companyId = id;
      this.scoreLoading = true;
      this.axios
        .get("api/user/comment/list", {
          params: this.currentscoreList,
        })
        .then((response) => {
          this.scoreData = response.data.value.data;
          for (var i = 0; i < response.data.value.total; i++) {
            this.scoreData[i].createTime =
              new Date(response.data.value.data[i].createTime).getFullYear() +
              "年" +
              (new Date(response.data.value.data[i].createTime).getMonth() +
                1) +
              "月" +
              new Date(response.data.value.data[i].createTime).getDate() +
              "日 " +
              new Date(response.data.value.data[i].createTime).getHours() +
              ":" +
              new Date(response.data.value.data[i].createTime).getMinutes();
          }
          this.scoreLoading = false;
        })
        .catch((error) => {
          this.$message.error("无法获取数据");
          this.scoreLoading = false;
        });
    },
    handleResetSearch() {
      this.searchList = {
        areaId: "",
        cityId: "",
        labelId: "",
        name: "",
        provinceId: "",
        pageSize: 5,
      };
      this.pageCunt = 1;
      this.currentList = this.searchList;
      this.handleCurrentChange(1);
    },
    handleSearchList() {
      this.currentList = this.searchList;
      this.handleCurrentChange(1);
    },
    sendOrder() {
      this.$refs.sendMessage.validate((valid) => {
        if (valid) {
          var address =
            this.sendMessage.provinceId +
            this.sendMessage.cityId +
            this.sendMessage.areaId +
            this.sendMessage.address;
          var description = this.$refs.label.selected.label;
          this.axios
            .post(
              "api/user/auth/order/insert?address=" +
                address +
                "&companyId=" +
                this.sendMessage.companyId +
                "&customerName=" +
                this.sendMessage.customerName +
                "&description=" +
                description +
                "&email=" +
                this.sendMessage.email +
                "&phone=" +
                this.sendMessage.phone +
                "&price=" +
                this.sendMessage.price +
                "&qty=" +
                this.sendMessage.qty +
                "&serverId=" +
                this.sendMessage.serverId +
                "&startTime=" +
                this.sendMessage.startTime
            )
            .then((response) => {
              if (response.data.code == "200") {
                this.$message.success("发布成功");
                this.handleCurrentChange(1);
                this.showOrder = false;
              } else {
                this.$message.error(response.data.message);
              }
            })
            .catch((error) => {
              this.$message.error(error);
            });
        } else {
          this.$message.error("请填写全部内容");
          return false;
        }
      });
    },
    addAddress(list) {
      console.log(list);
      this.sendMessage.customerName = list.name;
      this.sendMessage.phone = list.phone;
      this.sendMessage.email = list.email;
      this.sendMessage.provinceId = list.area.city.province.name;
      this.sendMessage.cityId = list.area.city.name;
      this.sendMessage.areaId = list.area.name;
      this.sendMessage.address = list.address;
      this.showAddress = false;
    },
    showserve(id) {
      this.axios
        .get("api/user/company/listServer?companyId=" + id)
        .then((response) => {
          this.ServerOptions = response.data.value;
        })
        .catch((error) => {});
    },
    showPrice(value) {
      const index = this.ServerOptions.findIndex((item) => item.id === value);
      this.sendMessage.price = this.ServerOptions[index].price;
    },
  },
};
</script>
<style lang="less" scope>
.abow_dialog {
    display: flex;
    justify-content: center;
    align-items: Center;
    overflow: hidden;
    .el-dialog {
        margin: 0 auto !important;
        height: 75%;
        overflow: hidden;
        .el-dialog__body {
            position: absolute;
            left: 0;
            top: 54px;
            bottom: 0;
            right: 0;
            padding: 0;
            z-index: 1;
            overflow: hidden;
            overflow-y: auto;
        }
    }
}
header.el-header {
  padding: 0px;
}
.header-container {
  font-family: "微软雅黑";
  padding: 0 20px;
  background-color: #ffffff;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .text {
    color: #ffff;
    font-size: 14px;
    margin-left: 10px;
  }
  .r-content {
    .user {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
  }
  .l-content {
    display: flex;
    align-items: center;
    /deep/.el-breadcrumb__item {
      .el-breadcrumb__inner {
        //font-weight: bold;
        &.is-link {
          color: #303133;
        }
      }
      &:last-child {
        .el-breadcrumb__inner {
          color: #97a8be;
        }
      }
    }
  }

}
</style>